<template>
    <div class="main-left-wrapper">
        <div class="main-left-top">
            <div class="timer-control">
                <timer></timer>
            </div>
            <div class="introduction">
                <div style="display: flex;justify-content: center;align-items: center;">
                    <dv-loading></dv-loading>
                </div>
                <div style="display: flex;justify-content: center;align-items: center">
                    <p style="color: orange;font-size: 0.25rem">图书馆人脸识别借书系统</p>
                </div>
            </div>
        </div>
        <div class="main-left-bottom">
            <div class="main-left-bottom-title">
                <p>新书概览</p>
            </div>
            <div class="main-left-bottom-box">
                <div>
                    <dv-scroll-board :config="config" style="width:100%;height:4.6rem;" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import timer from "./timer";
    export default {
        name: "mainLeft",
        data(){
            return{
                config:{
                    header: ['书名', '位置', '所属类别'],
                    data: [
                        ['html权威指南', '1楼2书架', '软件类'],
                        ['css权威指南', '1楼2书架', '软件类'],
                        ['javascript权威指南', '1楼2书架', '软件类'],
                        ['深入理解javascript', '1楼2书架', '软件类'],
                        ['html权威指南', '1楼2书架', '软件类'],
                        ['css权威指南', '1楼2书架', '软件类'],
                        ['javascript权威指南', '1楼2书架', '软件类'],
                        ['深入理解javascript', '1楼2书架', '软件类'],
                        ['-----', '-----', '-----']
                    ],
                    columnWidth: [150]
                }
            }
        },
        components:{
            timer
        }
    }
</script>

<style scoped lang="less">
    .main-left-wrapper{
        padding: 0.25rem;
        height: 9rem;
        width: 5rem;
        display: flex;
        flex-direction: column;
        .main-left-top{
            height: 4rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            .timer-control{
                display: flex;
                height: 0.5rem;
                justify-content: center;
                align-items: flex-end;
                margin-bottom: 0.1rem;
                color: aquamarine;
                font-size: 0.2rem;
            }
            .introduction{
                height: 3.5rem;
                border-radius: 0.25rem 0.25rem 0 0;
                background-color: #070D54;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }
        .main-left-bottom{
            height: 6rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            .main-left-bottom-title{
                display: flex;
                height: 0.5rem;
                justify-content: center;
                margin-bottom: 0.05rem;
                color: aquamarine;
                font-size: 0.2rem;
            }
            .main-left-bottom-box{
                height: 4.6rem;
                width: 100%;
                border-radius: 0.25rem 0.25rem 0 0;
                background-color: #070D54;
                font-size: 0.18rem;
            }
        }
    }
</style>
